<template>
  <div>
    <div
      style="
        position: fixed;
        top: 5px;
        z-index: 100;
        width: 100%;
        text-align: center;
        color: #f00;
      "
    >
        <p style="padding:0 10px;font-weight: 600;color:#000;font-size:22px;margin:0;" v-if="600 - timeNow - isTime>0">
          {{(600 - timeNow - isTime)/60>=10?'':'0'}}{{parseInt((600 - timeNow - isTime)/60)
          }}:{{(600 - timeNow - isTime)%60>=10?'':'0'}}{{(600 - timeNow - isTime)%60}}
        </p>
        <p style="padding:0 10px;font-weight: 600;color:#f00;font-size:22px;margin:0;" v-else>已看完</p>
      提示: 培训课件需观看10分钟以上计算学时<br />(观看过程中,请勿刷新页面)
    </div>
    <div 
    style="
        position: fixed;
        top: 5px;
        z-index: 1001;
        color: #f00;
        left:12px;
      "
    >
      <van-button type="primary" size="small" @click="goBack" color='#ffa833'>返回</van-button>
    </div>
    <div 
    style="
        position: fixed;
        top: 5px;
        z-index: 1001;
        color: #f00;
        text-align: end;
        right:8px;
      "
    >
      <van-button type="primary" size="small" @click="serachClass" color='#327bff'>查看下一个课件</van-button>
    </div>
    <!--    -->
    <div
      style="
        position: fixed;
        bottom: 40px;
        z-index: 100;
        width: 100%;
        text-align: center;
        background: rgba(255, 255, 255, 0.6);
        line-height: 47px;
      "
    >
      <el-button
        icon="el-icon-minus"
        circle
        @click="clickUp('minus')"
        :disabled="disabledLittle"
      ></el-button>
      <span style="padding:15px;10px;"> {{ widthNum }}% </span>
      <el-button
        icon="el-icon-plus"
        circle
        @click="clickUp('push')"
        :disabled="disabledBig"
      ></el-button>
    </div>
    <div class="border" :style="{ width: widthNum + '%' }" ref="bodyauto">
      <pdf
        ref="pdf"
        :src="url"
        :page="item"
        @num-pages="pageCount = $event"
        @progress="progressAll"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
        v-for="item in numPages"
        :key="item"
        v-loading="loading"
      ></pdf>
      <div
        v-if="disabled"
        style="
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
        "
      >
        <van-button
          type="info"
          class="button"
          size="mini"
          @click="load"
          style="width: 100%"
          >点击加载更多....</van-button
        >
      </div>
    </div>
    <div
      style="position: absolute; top: 0; right: 0; height: 100vh; width: 100vw;background:#d4d4d4;"
      v-if="disFace"
    >
      <face :comments="true" :show.sync="disFace" type="kjface"></face>
    </div>
    <!-- <div class="progress"
         v-loading='loading' v-show="loading">
      <el-progress type="circle"
        :width="70"
        color="#53a7ff"
        :percentage="Math.floor((currentPage/numPages)*100)"></el-progress>
      <br>
      <span>加载文件中，文件较大请耐心等待...</span>
    </div> -->
  </div>
</template>

<script>
import pdf from "vue-pdf";
import { mapGetters } from "vuex";
import { materialaddlog, materiallearnlog,materialList } from "@/api/admin.js";
import face from "@/components/Face/photo.vue";
import { getapplyid } from "@/utils/auth";
export default {
  components: { pdf, face },
  data() {
    return {
      // 当前页数
      currentPage: 0,
      // 总页数
      pageCount: 0,
      // 加载进度
      loadedRatio: 0,
      url: "",
      id: this.$route.query.id,
      subjctid: this.$route.query.subjctid,
      kj:this.$route.query.kj,
      numPages: 5,
      pagenum: 10,
      disabled: this.pageCount > 5,
      widthNum: 100,
      loading: false,
      disabledBig: false,
      disabledLittle: true,
      isTime: 0, //当前看了多久
      overTime: 0, //是否已经看完
      timeNow: 0, //之前看了多久
      Interval: Object,
      face: "", //人脸图像
      disFace: false,
      facetimeObj: Object, //人脸验证倒计时对象
      pdfOffIn:[],
    };
  },
  computed: { ...mapGetters(["Jurisdictions", "initObj"]) },
  created() {
    if (
      this.initObj.is_face &&
      JSON.parse(this.initObj.is_face)[this.Jurisdictions.gz].kjface ==
        "开启" &&
      JSON.parse(this.initObj.is_face)[this.Jurisdictions.gz].kjfacetime
    ) {
      this.facetimeObj = setTimeout(() => {
        this.disFace = true;
      }, JSON.parse(this.initObj.is_face)[this.Jurisdictions.gz].kjfacetime * 60 * 1000);
    }
    // this.url = "/api" + this.$route.query.pdf.split(".com")[1];
    this.url = this.$route.query.pdf;
    this.loading = true;
    // this.getNumPages()
    this.jlLog();
   
    // this.disabled=true
    // setTimeout(()=>{
    //     this.disabled=this.pageCount>5
    // },500)
  },
  watch: {
    pageCount(val) {
      if (this.numPages != this.pageCount) {
        this.disabled = val > 5;
      }
    },
    
    disFace(val) {
      this.$nextTick(() => {
        if (val) {
          clearTimeout(this.facetimeObj);
          // this.$refs.time.pause()
        } else {
          if (
            this.initObj.is_face &&
            JSON.parse(this.initObj.is_face)[this.Jurisdictions.gz].kjface ==
              "开启" &&
            JSON.parse(this.initObj.is_face)[this.Jurisdictions.gz].kjfacetime
          ) {
            this.facetimeObj = setTimeout(() => {
              this.disFace = true;
            }, JSON.parse(this.initObj.is_face)[this.Jurisdictions.gz].kjfacetime * 60 * 1000);
          }
          // this.$refs.time.start()
        }
      });
    },
  },
  mounted() {},
  methods: {
    goBack() {
      this.$router.push(`/study?kj=${this.$route.query.kj}&id=` + this.subjctid);
    },
    //查看下一个课件
    serachClass(){
      this.loading=true
      materialList({
        msid: this.subjctid,
        file_type: "课件",
        page: 1,
        limit: 10000,
        applyid: getapplyid(),
      }).then(async res=>{
        this.loading=false
        if(res.code==200){
          this.pdfOffIn=res.data.list
         for (let index = 0; index < res.data.list.length; index++) {
            const item = res.data.list[index];
            if(item.id==this.id){
              if(index+1 >= res.data.list.length){
                this.$toast.fail('已是最后一个课件!!!');
                break
              }else{
                await this.addLog()
                this.isjj=true
                this.id=res.data.list[index+1].id
                this.url=res.data.list[index+1].file_path
                this.jlLog()
                break
              }
            }
          }
        }
      })
    },
    
    async getNumPages() {
      // let loadingTask = pdf.createLoadingTask(this.url)
      // this.loading=true
      // await loadingTask.promise.then(pdf => {
      //     this.loading=false
      //     this.pagenum = pdf.numPages
      // })
    },
    //无限滚动
    load() {
      this.loading = true;
      if (this.numPages >= this.pageCount) {
        this.disabled = false;
      } else {
        if (this.pageCount - this.numPages >= 5) {
          this.disabled = true;
          this.numPages += 5;
        } else {
          if (
            this.pageCount - this.numPages < 5 &&
            this.pageCount - this.numPages > 0
          ) {
            this.disabled = true;
            this.numPages = this.pageCount;
          } else {
          }
        }
      }
      if (this.numPages == this.pageCount) {
        this.disabled = false;
      }
      // this.$nextTick(()=>{
      //     this.loading=false
      // })
    },
    //禁止右键
    oncontextmenu(e) {
      e.preventDefault();
    },
    //保存
   async addLog() {
      if (this.timeNow + this.isTime >= 600) {
        this.overTime = 1;
      } else {
        this.overTime = 0;
      }
      let obj = {
        mid: this.id,
        msid: this.subjctid,
        period: this.isTime,
        done: this.overTime,
        applyid: getapplyid(),
        face: this.face,
        mprogress: '1',
      };
      await materialaddlog(obj).then((res) => {});
    },
    //获取学习记录
    async jlLog() {
      this.numPages=5
      this.$nextTick(()=>{
        this.$refs.bodyauto.scrollTop = 0
      })
      this.loading=true
      await materiallearnlog({ applyid: getapplyid(), mid: this.id }).then(
        (res) => {
          this.loading=false
          if (res.code == 200) {
            res.data.list.map((item) => {
              this.timeNow += item.period;
            });
            if (this.timeNow >= 600) {
              this.overTime = 1;
            } else {
              this.overTime = 0;
            }
            clearInterval(this.Interval);
            this.isTime=0
            this.Interval = setInterval(() => {
              this.isTime++;
              if (this.isTime == 7200) {
                clearInterval(this.Interval);
              }
            }, 1000);
            // this.timeNow=res.data.list[res.data.list.length-1].period
          }
        }
      );
    },
    // pdf加载时
    loadPdfHandler(e) {
      // 加载的时候先加载第一页
      this.currentPage = 1;

      // this.$nextTick(()=>{
      //    this.loading=false
      // })
    },
    //加载完成
    progressAll(e) {
      if (e == 1) {
        this.loading = false;
      }
    },
    //放大缩小
    clickUp(name) {
      if (name == "push") {
        this.disabledLittle = false;
        if (this.widthNum < 200) {
          this.widthNum += 10;
        } else {
          this.disabledBig = true;
        }
      } else {
        this.disabledBig = false;
        if (this.widthNum > 100) {
          this.widthNum -= 10;
        } else {
          this.disabledLittle = true;
        }
      }
    },
  },
  beforeDestroy() {
    this.addLog();
    clearInterval(this.Interval);
  },
};
</script>

<style lang="scss" scoped>
.border {
  overflow: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.progress {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  //   text-align: center;
  height: 100vh;
  width: 100vw;
  background: rgba(255, 255, 255, 0.5);
}
.progress > span {
  color: #199edb;
  font-size: 14px;
}
</style>